*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ha-primary-btn{
  color: #409EFF;
  cursor: pointer;
}

.ha-success-btn{
  color: #67c23a;
  cursor: pointer;
}

.ha-warning-btn{
  color: #e6a23c;
  cursor: pointer;
}

.ha-error-btn{
  color: #f56c6c;
  cursor: pointer;
}

.el-button--primary-text{
  color: #409eff !important;
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  &:hover{
    color: #409effdd !important;
    border-color: transparent !important;
    background: transparent !important;
  }
  &.is-disabled{
    border-color: transparent !important;
    cursor: not-allowed;
  }
}
.el-button--danger-text{
  color: #f56c6c !important;
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  &:hover{
    color: #f56c6cdd !important;
    border-color: transparent !important;
    background: transparent !important;
  }
  &.is-disabled{
    border-color: transparent !important;
    cursor: not-allowed;
  }
}
.el-button--warning-text{
  color: #e6a23c !important;
  border-color: transparent !important;
  background: transparent !important;  
  padding-left: 0;
  padding-right: 0;
  &:hover{
    color: #e6a23cdd !important;
    border-color: transparent !important;
    background: transparent !important;
  }
  &.is-disabled{
    border-color: transparent !important;
    cursor: not-allowed;
  }
}
.el-button--success-text{
  color: #67c23a !important;
  border-color: transparent !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  &:hover{
    color: #67c23add !important;
    border-color: transparent !important;
    background: transparent !important;
  }
  &.is-disabled{
    border-color: transparent !important;
    cursor: not-allowed;
  }
}

.ha-split-line__h,.ha-line-h{
  height: 1px;
  width: 100%;
  background: #DCDFE6;
  &.bleed-line{
    width: calc(100% + 40px);
    position: relative;
    left: -20px
  }
}

.ha-split-line__v,.ha-line-v{
  height: 100%;
  width: 1px;
  background: #DCDFE6;
  &.bleed-line{
    height: calc(100% + 40px);
    position: relative;
    top: -20px;
  }
}

th.el-table__cell.gary-header__table{
  color: #333;
  font-family: 'MicrosoftYaHeiUI';
  font-size: 14px;
  font-weight: 700;
  background-color: #f7f7f7 !important;
}

.text-ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 以下进入UI
 @mixin box($justify:flex-start,$direction:row,$align:center){
  display: flex;
  align-items: $align;
  flex-direction: $direction;
  justify-content: $justify;
  width: 100%;
  height: 100%;
}

@function p2r($px) {
  @return $px / 100px * 1rem;
}

@for $i from 1 through 24 {
  .flex-#{$i} {
    flex: $i;
  }
}

@for $i from 1 through 10{
  .mr-#{$i}0{
    margin-right: $i * 10px !important;
  }
  .ml-#{$i}0{
    margin-left: $i * 10px !important;
  }
  .mt-#{$i}0{
    margin-top: $i * 10px !important;
  }
  .mb-#{$i}0{
    margin-bottom: $i * 10px !important;
  }
  .pr-#{$i}0{
    padding-right: $i * 10px !important;
  }
  .pl-#{$i}0{
    padding-left: $i * 10px !important;
  }
  .pt-#{$i}0{
    padding-top: $i * 10px !important;
  }
  .pb-#{$i}0{
    padding-bottom: $i * 10px !important;
  }
}

@mixin radius($px){
  border-radius: p2r($px);
}

.row-between{
  @include box(space-between);
  height: unset;
}
.row-around{
  @include box(space-around);
  height: unset;
}
.row-start{
  @include box();
  height: unset;
}
.row-end{
  @include box(flex-end);
  height: unset;
}
.col-between{
  @include box(space-between, column);
}
.col-around{
  @include box(space-around, column);
}
.col-start{
  @include box();
}
.w100{
  width: 100% !important;
}